const { ipcRenderer } = require("electron")
const { $ } = require("./helper")
const path = require('path');
let musicFilesPath = [];
window.addEventListener('DOMContentLoaded',()=>{
    $("select-music-button").addEventListener('click',()=>{
        ipcRenderer.send('open-music-file');
    });
    $("add-music-button").addEventListener('click',()=>{
        ipcRenderer.send('add-tracks',musicFilesPath);
    });
    const renderListHtml = (paths) => {
        const musicList = $("musicList");
        const musicItemsHtml = paths.reduce((html,music)=>{
           html += `<li class="list-group-item">${path.basename(music)}</li>`;
           return html;
        },'')
        musicList.innerHTML = `<ul class="list-group">${musicItemsHtml}</ul>`;
    }
    ipcRenderer.on('selected-file',(event, path)=>{
        if(Array.isArray(path)){
            renderListHtml(path);
            musicFilesPath = path;
        }
    })
});